<template>
  <div>
    <SellingDog v-for="(item, index) in dog" :key="index" :dogImgUrl="item.dogImgUrl" :dogName="item.dogName" @likeDog="dogFn" />
    <div>
      您喜欢的狗如下：
      <p v-for="(item, index) in arr" :key="index">{{ item }}</p>
    </div>
  </div>
</template>

<script>
import SellingDog from '@/components/SellingDog.vue'
export default {
  methods: {
    dogFn(name) {
      this.arr.push(name)
    }
  },
  data() {
    return {
      arr: [],
      dog: [
        {
          dogImgUrl: require('@/assets/博美.png'),
          dogName: '博美'
        },
        {
          dogImgUrl: require('@/assets/泰迪.png'),
          dogName: '泰迪'
        },
        {
          dogImgUrl: require('@/assets/金毛.png'),
          dogName: '金毛'
        },
        {
          dogImgUrl: require('@/assets/哈士奇.png'),
          dogName: '哈士奇'
        },
        {
          dogImgUrl: require('@/assets/阿拉斯加.png'),
          dogName: '阿拉斯加'
        },
        {
          dogImgUrl: require('@/assets/萨摩耶.png'),
          dogName: '萨摩耶'
        }
      ]
    }
  },
  components: {
    SellingDog
  }
}
</script>

<style lang="scss"></style>
